<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<fsButton ref="button" plain size="small" :buttons="buttons" @clickHandler="buttonHandler"></fsButton>
			</div>
			<div class="right-panel">
				<ex-search ref="search" :searches="searches" @searchOk="searchHandler" default-code="title" placeholder="请输入名称" >
					
				</ex-search>
			</div>
		</el-header>
	
		<el-main class="nopadding">
					<ex-table  id="pendingTable" ref="table" :class="isIndexWidgets?'sytable':''" :height="tableHeight" size="small" :columns="columns" :pagination="!isIndexWidgets" :url="this.$API.system.notice.list.url"
					:tablename="title" :iconname="'sc-icon-CustomDocumentTop'"
					  :params="fixParams" :auto-refresh="false" :selection="false" @columnClick="columnClickHandler"  class="homeTable-Box"></ex-table>

<!--					<ex-table  id="pendingTable" ref="table" :class="isIndexWidgets?'sytable':''" :height="isIndexWidgets?214:null" size="small" :columns="columns" :pagination="!isIndexWidgets" :url="this.$API.system.pending.list.url"-->
<!--					:params="fixParams" :auto-refresh="false" :selection="false" @columnClick="columnClickHandler"  class="homeTable-Box"></ex-table>-->

		</el-main>
	</el-container>
</template>

<script>
import ExTable from "@/components/exTable/index.vue";
import ExSearch from "@/components/exSearch/index.vue";
import ExSearchTree from "@/components/exSearchTree/index.vue";

export default {
	name: '通知公告',
	components: {
		ExSearchTree,
		ExSearch,
		ExTable,
	},
	props:{
		isIndexWidgets: {type:Boolean,default:false}
	},
	data() {
		return {
			statistics:{},
			pendingStatus:'0',
			relObjectStatus:null,
			messageCount:this.$store.state.websocket,
			buttons: [
				{name: "导出", icon: "el-icon-download", click: "export", type: "info"},
			],
			searches: [
				{type: "input", name: "名称", code: "noticeName", placeholder: "请输入名称"},
				
			],
			columns: [
				{code: "noticeName", name: "名称", width: "", click: "show1"},
				
				// {code: "finishUser", name: "办结人", width: "80",formatter: "SysUser"},
				{code: "createTime", name: "日期", width: "200", formatter: "DATETIME"},

			],
			parentLevelCode: null,
			isAlready:false,
			fixParams:{},
			tableHeight:100,//表格高度
			title:"通知公告",
			tempParams:{excludeStatus:['delete'],showXuli:false},
		}
	},
	watch:{
		messageCount:{
			handler(){
				this.searchHandler();
			},
			deep:true
		},
	},
	created() {
		if(this.isIndexWidgets){
			this.fixParams = {pageSize:4};
			this.columns= [
				{code: "title", name: "名称", width: "", click: "show1"},
				{code: "createUser", name: "申请人", width: "75",formatter: "DICT",key: "SysUser"},
				//{code: "relObjectStatus", name: "事项状态", width: "140",formatter: "DICT",key:"REL_OBJECT_STATUS"},
				{code: "createTime", name: "时间", width: "170", formatter: "DATETIME"},
			];
		}
		this.isAlready = true;
	},
	mounted() {
		this.searchHandler(this.pendingStatus);
		this.tableHeightFun()//计算表格高度
	},
	methods: {
		tableHeightFun(){//计算表格高度
			var screenHeight = document.documentElement.clientHeight;
			var clientWidth = document.documentElement.clientWidth;
			let contH=(screenHeight);
			if(clientWidth<1600){
				//contH=(screenHeight-236)/2;
			}
			this.tableHeight=contH-250;
		},
		buttonHandler(index, name) {
			this.$options.methods[name](this, index);
		},
		async searchTreeHandler(data) {
			this.parentLevelCode = data.levelCode;
			let queryParams = {pathCode: this.parentLevelCode}
			await this.$refs.table.refresh(queryParams);
		},
		async searchHandler() {			

			this.tempParams.pathCode=this.parentLevelCode;


			this.tempParams.excludeStatus = this.tempParams.excludeStatus.filter(item=>item!=='delete');
			this.tempParams.excludeStatus.push('delete');
			
			this.$refs.table.refresh();
			let res = await this.$API.system.pending.statusStatistics.post({isStatisticsMySelf:true});
			if(res.code===2000){
				this.statistics = res.map;
			}

		},
		columnClickHandler(name, data) {
			this.$options.methods[name](this, data);
		},
		toMore(){
			let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);
			this.$router.push({
				name: "myPending",
				params: {fromRouteId: fromRouteId}
			});
		},
		//查看
		async show1(_this, row) {
			
			localStorage.setItem("noticeid", row.id);
			let key = _this.$TOOL.crypto.MD5(row.noticeName);//可以做为key的关键字段或内容
			let fromRouteId = _this.$TOOL.crypto.MD5(_this.$route.path);
			_this.$router.push({
				name: "nodeview",
				params: {fromRouteId: fromRouteId, key: key}
			});
			/*
            let title =item.title;
			let id = item.id;
			let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
			//noticeContent
			let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);
			let routeParams = {
						id: key,
						title: title,
						modelid:id
					};
			this.$store.dispatch("addRouteParams", routeParams);
			this.$router.push({
				name: "nodeview",
				params: {fromRouteId: fromRouteId, key: key}
			});
			*/
            
		},
	}
}
</script>

<style scoped>
.todolistTop-head{
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
}
.todolistTop-headRightBox{
	right: 14px;position: absolute;cursor: pointer;display:flex;
}
.itemActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #333333;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;
}
.itemActiveLine{
	background-image: linear-gradient(
    -88deg,
    rgba(0, 160, 254, 1) 0,
    rgba(0, 160, 254, 1) 0,
    rgba(1, 80, 223, 1) 100%,
    rgba(1, 80, 223, 1) 100%
  );
  border-radius: 2px;
  width: 32px;
  height: 4px;
  margin:  auto;
}

.itemActiveMore:hover{
    margin-left: 91%;
	background-color: rgba(106, 131, 252, .7) !important;
	color: #fff !important;
	float: right;
}
.itemUnActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #666666;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;

}
.sytable{
	height: 96% !important;
}
.sytable .el-table{
	margin-bottom: 0px;
	height: 110% !important;
}

.todotitle{
	width: 77px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;

  margin: 0px 0 0 12px;
  font-weight: 500;
}
.todolistTop{
	//width: 90%;
  height: 27px;
  margin: 7px 0 0 16px;

padding: 0 !important;
margin-bottom: 7px;
justify-content:left
}
.todotitleTopImg{
	width: 20px;
  height: 20px;
  background: url(../../../../../public/img/homeTodoTop.png)
    100% no-repeat;
  background-size: 100% 100%;

}
.todotitleTopMoreImg{
	width: 22px;
  height: 22px;
  background: url(../../../../../public/img/homeTodoTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
}
.todotitleTopMoretitle{
	width: 33px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(1, 123, 207, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin: 3px 0 0 8px;
}
@media (min-width: 1200px) and (max-width: 1600px){
	.todolistTop-headRightBox{
		right:0;
	}
}


</style>
